<template>
    <div class="container">
        <div class="divPageTop clearfix">
            <el-breadcrumb separator="/" class="pull-left">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>账号管理</el-breadcrumb-item>
            </el-breadcrumb>
            <ul class="lstAcs pull-right hidden">
                <li @click="acShowDlg(-1)"><i class="fa fa-plus"></i> 新建账号</li>
            </ul>
        </div>
        <div class="divCard">
            <el-card class="box-card">
                <div slot="header" class="divHeader clearfix">
                    <span class="spanCardTitle pull-left">账号列表</span>
                    <el-button style="float: right; padding: 3px 0; margin-left:15px" type="text" @click="acRefresh"><i class="fa fa-refresh"></i> 刷新</el-button>
                    <el-button style="float: right; padding: 3px 0; margin-left:15px" type="text" @click="acShowDlg(-1)"><i class="fa fa-plus"></i> 新建账号</el-button>
                </div>
                <div class="divTable">
                    <el-table
                        border
                        style = "100%" key="accountId"  :data="getDatas"
                    >
                        <el-table-column fixed prop="code" label="账号" width="90"/>
                        <el-table-column fixed prop="hwId" label="绑定ID" width="110"/>
                        <el-table-column fixed prop="caption" label="名称" width="90"/>
                        <el-table-column fixed prop="tel" label="电话" width="150"/>
                        <el-table-column fixed prop="pwdGuest" label="访问密码" width="90"/>
                        <el-table-column fixed prop="pwdAdmin" label="管理密码" width="120"/>
                        <el-table-column fixed prop="desc" label="备注说明" />
                        <el-table-column fixed    width="60" label="操作">
                            <template slot-scope="scope">
                                <el-button @click="acShowDlg(scope.$index)" type="text" size="small">修改</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                
            </el-card>
        </div>
        <div class="divDlg">
            <el-dialog  title="账号信息" :visible.sync="showDlgFalg" width="30%" center>
                <div class="divForm" >
                    <el-form ref="currentInfo" :model="datas.currentInfo" label-width="80px">
                        <el-form-item label="账号">
                            <el-input v-model="datas.currentInfo.code"></el-input>
                        </el-form-item>
                        <el-form-item label="绑定ID">
                            <el-input v-model="datas.currentInfo.hwId"></el-input>
                        </el-form-item>
                        <el-form-item label="名称">
                            <el-input v-model="datas.currentInfo.caption"></el-input>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="datas.currentInfo.tel"></el-input>
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-select v-model="datas.currentInfo.accountType" placeholder="请选择">
                                <el-option
                                    v-for="item in accountTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select> 
                        </el-form-item>
                        <el-form-item label="管理密码">
                            <el-input v-model="datas.currentInfo.pwdAdmin"></el-input>
                        </el-form-item>
                        <el-form-item label="访问密码">
                            <el-input v-model="datas.currentInfo.pwdGuest"></el-input>
                        </el-form-item>
                        <el-form-item label="备注说明">
                            <el-input v-model="datas.currentInfo.desc"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="showDlgFalg = false">取 消</el-button>
                    <el-button type="primary" @click="acPost">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script> 
    export default {
        mounted(){
            var me = this;
            
            me.accountTypes =[]
            Object.keys(me.dicts.accountTypes).forEach((k)=>{
                var item = {
                    value:k ,
                    label: me.dicts.accountTypes[k]
                }
                me.accountTypes.push(item)
            });
            me.acRefresh()
        },
        data(){
            return{
                showDlgFalg: false ,
                dicts:{
                    accountTypes:{
                        "user":"软件终端" ,
                        "ideaHub":"ideaHub" 
                    }
                },
                datas:{
                    items:[] ,
                    index:0 ,
                    currentInfo:{}  
                } ,
                accountTypes:[]                
            }
        },
        methods:{ 
            acRefresh(){
                var me = this;
                try{
                    me.showDlgFalg = false;
                    var ps={}
                    me.$query('account/getItems' , ps ).then(res=>{
                        me.datas.items = (res && res!=null && res.length>0 )? res:[];
                        if( me.datas.index >= me.datas.items.length){
                            me.datas.index = 0;
                        }
                    })
                }
                catch(er){
                    console.log(er);
                }                
            },
            acShowDlg(index){
                var me = this;
                try{
                    me.datas.index = index; 
                    me.updateCurrentInfo();
                    me.showDlgFalg = true;
                }
                catch(er){
                    console.log(er);
                }
            },
            updateCurrentInfo(){
                var me = this;
                try{
                    if( me.datas.index>=0){
                        me.datas.currentInfo = me.datas.items[ me.datas.index];
                    }
                    else{
                        me.datas.currentInfo = {
                            accountId:0 ,
                            code:"",
                            hwId:"",
                            tel:"",
                            caption:"",
                            desc:"",
                            accountType:"ideaHub",
                            pwdAdmin:"",
                            pwdGuest:""
                        }
                    }
                }
                catch(er){
                    console.log(er);
                }
            },
            acPost( ){
                var me = this;
                try{
                    var aKey = me.datas.currentInfo.accountId>0?"account/edit":"account/new";
                    var ps = me.datas.currentInfo;
                    me.$query(aKey , ps ).then(res=>{
                        if( res.affectedRows>0){
                            me.acRefresh();
                        }
                    })
                    console.log( me.datas.currentInfo)
                }
                catch(er){
                    console.log(er);
                }
            }
        },
        computed:{
            getDatas(){
                var me = this;
                return me.datas.items;
            } ,
            getDict_AccountType(){
                var me = this;
                var res =[]
                Object.keys(me.dicts.accountTypes, (k)=>{
                    var item = {
                        key:k ,
                        value: me.dicts.accountTypes[k]
                    }
                    res.push(item)
                });
                return res;
            } 
        }
        
        
    }
</script>

<style lang="scss" scoped>

</style>